<template>
  <div ref="container">
    <div :class="iscashcoupon == '1' ? 'isbg1' : 'isbg2'" class="newcontainer">
      <div class="realsave">
        <div class="isinput">
          <input
            type="tel"
            maxlength="11"
            placeholder="请输入手机号"
            v-model="isTel"
            class="realInput"
          />
        </div>
        <button class="inImg" @click="getCoupon" :disabled="isDisabled">
          <img src="@assets/images/savecoupon.png" alt="" />
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { getCouponsWithPhone } from "@api/user";
const NAME = "NewGetCoupon";
import debounce from "lodash.debounce";
import share from "../../../assets/js/common/share.js";
import shareMsg from "../../../assets/js/common/shareConfig.js";
import cookie from "@utils/store/cookie";
export default {
  name: "NewGetCoupon",
  components: {},
  props: {},
  data: function() {
    return {
      iscashcoupon: "1",
      isDisabled: false,
      isTel: ""
    };
  },
  $route(n) {
    if (n.name == NAME) {
      this.shareInfo();
    }
  },
  mounted: function() {
    this.shareInfo();
  },
  methods: {
    shareInfo() {
      let shareUrl = window.location.href;
      if (shareUrl.indexOf("from1=app") != -1) {
        shareUrl = shareUrl.replace("from1=app", "");
      }
      if (this.$route.query.from1 == "app") {
        shareMsg.shareConfig(
          "app",
          "0",
          "0",
          "听见广播超值优惠券",
          "听见广播橱窗商品专享",
          shareUrl,
          "https://seefm.oss-cn-beijing.aliyuncs.com/image/coupon_share.png",
          "",
          "1"
        );
      }
      share.share(
        shareUrl,
        "听见广播超值优惠券",
        "听见广播橱窗商品专享",
        "https://seefm.oss-cn-beijing.aliyuncs.com/image/coupon_share.png"
      );
      share.QQshare(
        shareUrl,
        "听见广播超值优惠券",
        "听见广播橱窗商品专享",
        "https://seefm.oss-cn-beijing.aliyuncs.com/image/coupon_share.png"
      );
    },
    getCoupon() {
      let self = this;
      let reg = /^1\d{10}$/;
      if (!this.isTel) {
        return this.$dialog.message("请输入手机号");
      }
      if (!reg.test(this.isTel)) {
        return this.$dialog.message("请输入正确格式手机号");
      }
      const params = {
        phone: this.isTel,
        sign: this.$route.query._tt
      };
      const { from1 } = this.$route.query;
      const and = from1 ? "&" : "";
      getCouponsWithPhone(params)
        .then(() => {
          this.$dialog.message("领取成功");
          cookie.set("withPhone", this.$route.query._tt);
          this.$router.push({
            path: `/user/user_coupon?${
              from1 == "app" ? "from1=app" : ""
            }${and}success=true`
            // query: { withPhone: this.$route.query._tt }
          });
        })
        .catch(err => {
          cookie.set("withPhone", this.$route.query._tt);
          this.$router.push({
            path: `/user/user_coupon?success=false${
              from1 == "app" ? "&from1=app" : ""
            }&msg=${err.msg}&phone=${this.isTel}`
            // query: { withPhone: this.$route.query._tt }
          });
        });
    }
  }
};
</script>
<style scoped lang="scss">
.newcontainer {
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
}
.isbg1 {
  background: url("../../../assets/images/iscoupon1.png") no-repeat;
  background-size: 100% 100%;
}
.isbg2 {
  background: url("../../../assets/images/iscoupon2.png") no-repeat;
  background-size: 100% 100%;
}
.realsave {
  width: 100%;
  box-sizing: border-box;
  padding-top: 7.06rem;
}
.isinput {
  width: 69%;
  margin: 0 auto;
}
.realInput {
  width: 100%;
  outline: none;
  border: 0;
  background: #f5f5f5;
  border-radius: 0.44rem;
  margin-bottom: 0.4rem;
  padding: 0.24rem 0 0.24rem 1.61rem;
  font-size: 0.32rem;
  font-weight: 500;
  color: #000000;
}
input::-webkitx-input-placeholder {
  /* WebKit browsers */
  font-size: 0.32rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
}
.inImg {
  width: 82.6%;
  margin-left: 8.7%;
  outline: none;
  border: 0;
}
.inImg img {
  width: 100%;
  height: 100%;
}
</style>
